<template>
  <div id="ProblemDisposal">
    <div class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />
        返回
      </span>
      详细信息
    </div>
    <div class="main">
      <div class="top">
        <img style="margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/1.png" />
        <p>
          <span style="width: 125px;display: inline-block;text-align: left">基本信息</span>
          <span style="width: 150px;display: inline-block;text-align: right">巡查信息</span>
        </p>
      </div>
      <div class="content">
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
          <span style="margin-right: 10px;" class="line"></span>
          巡查信息
        </p>
        <div class="list">
          <div>
            <ul>
              <li style="border-bottom:1px solid #D2D2D2;">
                <!-- <span style="color: #007AFF;">巡查时间</span> -->
                <van-field readonly clickable name="datetimePicker" :value="form.PATROL_TIME" label="巡查时间" placeholder="请选择巡查时间" @click="showPickerq = true" />
                <van-popup v-model="showPickerq" position="bottom">
                  <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @cancel="showPickerq = false" @confirm="onConfirmRQ" />
                </van-popup>
                <!-- <el-date-picker v-model="timeValue" style="float: right;width:40%;" type="date" value-format="yyyy-MM-dd" placeholder="请选择">
                </el-date-picker> -->
              </li>
              <li style="border-bottom:1px solid #D2D2D2;">
                <!-- <span style="color: #007AFF;">巡查人</span> -->
                <van-field v-model="form.INSEPECTOR" label="巡查人" placeholder="请填写巡查人" />
                <!-- <el-input style="float: right;width:40%;" v-model="inputName" placeholder="请输入巡查人"></el-input> -->
              </li>
            </ul>
          </div>

          <ul>
            <li v-for="(item,index) in contentData" :key="index" :style="{borderBottom:index===contentData.length-1?'none':'1px solid #D2D2D2'}">
              <span style="color: #007AFF;">{{item.name}}</span>
              <p v-if="item.name1" style="color: #ccc;">{{item.name1}}</p>
              <el-checkbox-group v-model="checkboxGroup" size="mini">
                <el-checkbox-button v-for="(item1,index1) in item.children" :label="item1.name" :key="index1">{{item1.name}}</el-checkbox-button>
              </el-checkbox-group>
              <!-- <p
              v-for="(item1,index1) in item.children"
              :key="index1"
              style="border-bottom: 1px solid #D2D2D2;"
            >
              <span >{{item1.name}}</span>
            <span style="float: right">{{item1.value}}</span>
            </p> -->
            </li>
          </ul>
        </div>
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;margin-bottom: 20px;">
          <span style="margin-right: 10px;" class="line"></span>
          巡查照片
        </p>
        <div>
          <van-uploader :after-read="afterRead" :before-delete="delectFile" v-model="fileList" multiple />
        </div>
        <div>
          <van-field autosize type="textarea" v-model="form.XCJL" label="巡查结论" placeholder="请输入巡查结论" />
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" size="mini" @click="save()">确定</el-button>
    </div>
  </div>
</template>
<script>
import { updateDataView, FileServerUpload, InsertDataView, dataServerOpenDataView, QuerySignCallback, GetFileData, DelectFile,FileServerProxy } from '../../../utils/api'
export default {
  data() {
    return {
      timeValue: '',
      inputName: '',
      checkboxGroup: [],
      fileList: [],
      IsWF: '',
      showPickerq: false,
      currentDate: new Date(),
      form: {
        PATROL_TIME: "",
        INSEPECTOR: "",
        XCJL: "",
      },
      contentData: [
        {
          name: '管理方面',
          value: '',
          children: [
            {
              name: '有项目管理标牌、安全警示标志和项目责任人',
              value: 'AQFH1'
            },
            {
              name: '有专职的安全员，有班前会记录和安全检查记录',
              value: 'AQFH2'
            },
            {
              name: '危险作业必须有安全措施和安全责任人',
              value: 'AQFH3'
            },
            {
              name: '定期开展安全活动，且必须做好记录',
              value: 'AQFH4'
            },
            {
              name: '对事故隐患登记并限期整改',
              value: 'GLFM1'
            },
          ]
        },
        {
          name: '施工人员',
          value: '',
          name1: '',
          children: [
            {
              name: '穿戴好劳保用品，正确使用防护工具',
              value: 'SGRY1'
            },
            {
              name: '在工作区域若需动火作业，必须开具动火工作标',
              value: 'SGRY2'
            },
            {
              name: '特殊工种必须持证上岗',
              value: 'SGRY3'
            },
            {
              name: '电线箱中是否有接地保护',
              value: 'SGRY4'
            },
            {
              name: '非施工人员和无关人员不得进入作业现场',
              value: 'SGRY5'
            }
          ]
        },
        {
          name: '施工现场',
          value: '',
          children: [
            {
              name: '模板支架要设置剪刀撑、横杆',
              value: 'SGXC2'
            },
            {
              name: '立杆接长采用对接夹板接头',
              value: 'SGXC3'
            },
            {
              name: '设置扫地杆和垫板',
              value: 'SGXC4'
            },
            {
              name: '竹脚手架绑扎用塑料篾双斜扣',
              value: 'SGXC1'
            },
            {
              name: '现有建筑上随意加盖',
              value: 'JZJG1'
            },
            {
              name: '利用房屋墙体擅自搭设',
              value: 'JZJG2'
            },
            {
              name: '拆除承重墙',
              value: 'JZJG3'
            },
            {
              name: '现浇板钢筋设置了马凳和垫块',
              value: 'SGXC5'
            },
            {
              name: '木屋架设置剪刀撑',
              value: 'JZJG4'
            },
            {
              name: '预制板的端部与外墙拉结',
              value: 'JZJG5'
            },
            {
              name: '预制板侧面与外墙拉结',
              value: 'JZJG6'
            },
            {
              name: '电缆线架空保护',
              value: 'SGXC6'
            },
          ]
        },
        {
          name: '危险作业区域',
          value: 'xxxx',
          children: [
            {
              name: '边坡、临空面、临水面等边缘设有栏杆或明显的警告标志',
              value: 'WXZY1'
            },
            {
              name: '对孔口等设防护围栏或加盖板，以及有明显的警告标志',
              value: 'WXZY2'
            },
            {
              name: '对多层作业有隔离防护措施及专人监护',
              value: 'WXZY3'
            }
          ]
        },
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/surveillance",
      });
    },
    onConfirmRQ(val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      this.className = 'timeClass'
      this.form.PATROL_TIME = `${year}-${month}-${day}`
      this.showPickerq = false
    },
    save: async function () {
      this.contentData.forEach(item => {
        item.children.forEach(items => {
          this.form[items.value] = 6;
          this.checkboxGroup.forEach(ite => {
            if (items.name === ite) {
              this.form[items.value] = 5;
            }
          })
        })
      })
      this.form['TO_ROW_GUID'] = this.formData.ROW_GUID
      if (this.form.ROW_GUID) {
        let params1 = {
          dataGuid: '932fdd33-02c4-4592-8931-4ca5b654cf8c',
          strParams: JSON.stringify([this.form]),
          token: window.localStorage.getItem('token')
        }
        const res1 = await updateDataView(params1)
        if (res1.data.Success) {
          this.$toast.success('保存成功!')
        } else {
          this.$toast.fail('保存失败!')
        }
      } else {
        this.form['ROW_GUID'] = this.rowGuid;
        let params1 = {
          dataGuid: '932fdd33-02c4-4592-8931-4ca5b654cf8c',
          strParams: JSON.stringify([this.form]),
          token: window.localStorage.getItem('token')
        }
        const res2 = await InsertDataView(params1)
        if (res2.data.Success) {
          this.$toast.success('保存成功!')
        } else {
          this.$toast.fail('保存失败!')
        }
      }
      this.updateSFXC()
    },
    updateSFXC: async function (){
      // 3f676590-0bd3-40eb-a592-db8ac3146aca
      let params1 = {
        dataGuid: '3f676590-0bd3-40eb-a592-db8ac3146aca',
        strParams: JSON.stringify([{SFXC:'已巡查',PKID:this.formData.PKID,ROW_GUID:this.formData.ROW_GUID}]),
        token: window.localStorage.getItem('token')
      }
      const res1 = await updateDataView(params1)
    },
    //获取相关材料
    getFile: async function (ROW_GUID) {
      this.rowGuid = ROW_GUID;
      const res1 = await GetFileData({
        groupGuid: "cf53d740-8572-4768-8a5e-5c341afe78b4",
        toRowGuid: ROW_GUID,
      })
      if (res1.data.FilesInfo.length > 0) {
        res1.data.FilesInfo.forEach(element => {
          this.fileList.push({
            isImage: true,
            ROW_GUID: element.ROW_GUID,
            url: window.g.BaseURL + "FileServer/api/Preview?token=" + window.localStorage.getItem('token') + "&" + "fileGuid=" + encodeURIComponent(element.ROW_GUID)
          })
        })
      }
    },
    //相关材料
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.getFileServerUpload(file)
    },
       delectFile: async function (file) {
      let fileguid = "";
      if (file.ROW_GUID) {
        fileguid = file.ROW_GUID;
      } else {
        fileguid = this.fileGuid;
      }
      if (fileguid) {
        let params = {
          accessCode: "ce9b691634de4ebca68dc5bb638d07f4",
          cityCode: window.localStorage.getItem("citycode")
            ? window.localStorage.getItem("citycode")
            : "441300000000",
          params: {
            fileGuid: fileguid,
            token: window.localStorage.getItem("token"),
          },
        };
        const res = await FileServerProxy(params);
        let data = JSON.parse(res.data.data).Success;
        if (data) {
          this.$toast.success("删除成功!");
        }
      }
    },
    // delectFile: async function (file) {
    //   if (file.ROW_GUID) {
    //     const res = await DelectFile({
    //       fileGuid: file.ROW_GUID,
    //       token: window.localStorage.getItem('token')
    //     })
    //     if (res.data.Success) {
    //       this.$toast.success('成功!')
    //     } else {
    //       this.$toast.fail(res.data.Msg)
    //     }
    //   }
    // },
    getFileServerUpload: async function (file) {
      let formData = new FormData();
      if (file instanceof Array) {
        file.forEach(item => {
          formData.append('file', item.file)
        })
      } else {
        formData.append('file', file.file)
      }
      formData.append('toRowGuid', this.rowGuid)
      formData.append('groupGuid', "cf53d740-8572-4768-8a5e-5c341afe78b4")
      formData.append('token', window.localStorage.getItem('token'))
      const res = await FileServerUpload(formData)
      if (res.data.Success == true) {
        this.$toast.success('上传成功!');
        res.data.FileList.forEach((item, index) => {
          let n = index + 1
          this.fileList[this.fileList.length - n]['isImage'] = true;
          this.fileList[this.fileList.length - n]['ROW_GUID'] = item.FILEGUID;
          this.fileList[this.fileList.length - n]['url'] = window.g.BaseURL + "FileServer/api/Preview?token=" + window.localStorage.getItem('token') + "&" + "fileGuid=" + encodeURIComponent(item.FILEGUID);
        })
        // this.$notify({ type: 'success', message: '上传成功!' });
      }
    },
    getDetail: async function () {
      let params = {
        dataguid: "932fdd33-02c4-4592-8931-4ca5b654cf8c",
        searchObject: JSON.stringify([
          { "field": "TO_ROW_GUID", "type": "A", "operator": "like", "value": this.formData.ROW_GUID, "link": "AND" },
        ]),
        token: window.localStorage.getItem('token')
      }
      let params1 = {
	      "accessCode": "688bd3883572440a859dfd8ba9194e7b",
	      "cityCode": window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '',
	      "params": params
      } 
      const res = await QuerySignCallback(params1)
      if (eval("("+res.data.data+")").Data.length > 0) {
        this.contentData.forEach(item => {
          item.children.forEach(items => {
            if (eval("("+res.data.data+")").Data[0][items.value] == 5) {
              this.checkboxGroup.push(items.name)
            }
          })
        })
        eval("("+res.data.data+")").Data[0].PATROL_TIME = eval("("+res.data.data+")").Data[0].PATROL_TIME ? eval("("+res.data.data+")").Data[0].PATROL_TIME.split(" ")[0] : "";
        this.form = eval("("+res.data.data+")").Data[0]
        this.getFile(eval("("+res.data.data+")").Data[0].ROW_GUID)
      }
    },
  },
  mounted() {
    this.rowGuid = this.newGuid();
    this.formData = JSON.parse(this.$route.query.data)
    this.getDetail()
  }
}
</script>
<style scoped lang="scss">
#ProblemDisposal {
  height: 100vh;
  overflow: auto;
  background: #f6f6f6;
  font-size: 14px;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .top {
    height: 122px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 35px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .main {
    height: calc(100% - 100px);
    overflow: auto;
    .content {
      width: 100%;
      height: auto;
      background: #ffffff;
      padding: 10px;
      .line {
        width: 6px;
        height: 26px;
        background: #007aff;
        display: inline-block;
      }
      .list ul li {
        min-height: 40px;
        line-height: 40px;
      }
    }
  }
  .footer {
    height: 50px;
    background-color: #ffffff;
    text-align: center;
    line-height: 50px;
  }
}
</style>
<style lang="scss">
#ProblemDisposal {
  .el-checkbox-button {
    margin-left: 3px;
    .el-checkbox-button__inner {
      border-radius: 30px;
      border-left: 1px solid #dcdfe6;
      white-space: normal;
      word-break: break-all;
      text-align: left;
    }
  }
  .el-checkbox-button:nth-child(1) {
    margin-left: 0px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover,
  .van-cell__title {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-input__inner {
    border: none;
  }
}
</style>
